<script setup>
import RadarChart from '@/components/student/chart/radarChart.vue'
import Chart1 from '@/components/table/StudentTable1.vue'
import Chart2 from '@/components/chart/BarChartStu.vue'
import Chart3 from '@/components/chart/PieChartAll.vue'
import Table1 from '@/components/table/SuggestStuUniverse.vue'
import { ref } from 'vue'
import scoreModel from '@/components/model/score-model.vue'
import { importScores } from '@/api/exam/userInfo'
import { ElMessage } from 'element-plus'


const isOpenImportDialog = ref(false);
const form = ref({})

function handleClikImport() {
  initialForm();
  isOpenImportDialog.value = true;
}

function cancel() {
  initialForm();
  isOpenImportDialog.value = false;
}

function submitForm() {
  importScores(form.value.scores).then(res => {
    if (res.code == 200) {
      ElMessage.success(res.data);
      isOpenImportDialog.value = false;
      initialForm();
    }
  })
}

function initialForm() {
  form.value.scores = [
    { label: '', value: '', id: 0 },
    { label: '', value: '', id: 1 },
    { label: '', value: '', id: 2 },
    { label: '', value: '', id: 3 },
    { label: '', value: '', id: 4 },
    { label: '', value: '', id: 5 }
  ]
}

</script>

<template>
  <el-row :gutter="20" class="m-10 ">
    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
      <el-card style="max-width: 450px" class="ml-20">
        <!-- class="flex items-center" -->
        <template #header>
          <el-avatar class="mr-4">user</el-avatar>
          <div>
            <p>Admin</p>
            <p>超级管理员</p>
          </div>
        </template>
        <p>准考证号: <span>2131231</span></p>
        <p>地址: <span>山东省济南市历下区</span></p>
        <p>邮箱: <span>1@qq.com</span></p>
        <template #footer>
          <el-button @click="handleClikImport">导入成绩</el-button>
        </template>
      </el-card>

      <el-card class="ml-20 my-10 h-[450px]" style="max-width: 450px">
        <RadarChart></RadarChart>
      </el-card>
    </el-col>

    <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
      <el-card class="m-2">
        <Chart1></Chart1>
      </el-card>

      <el-card class="m-2 h-[300px]">
        <Chart2></Chart2>
      </el-card>

      <el-row>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card class="m-2 h-[250px]">
            <Table1></Table1>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card class="m-2 h-[250px]">
            <Chart3></Chart3>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-dialog v-model="isOpenImportDialog" width="600" title="导入成绩">
    <el-form :model="form" label-width="auto">
      <el-form-item v-for="item in form.scores" :key="item.id">
        <score-model v-model:label="item.label" v-model:value="item.value"></score-model>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 添加一些样式以保持美观 */
@media (min-width: 1000px) {
  .el-card {
    max-width: none;
    /* 在宽屏模式下取消最大宽度限制 */
  }
}
</style>